<template>
  <div class="app-container">
    <task-info-card
      v-if="task"
      :task="task"
      :task-init-fn="handleInitialTask"
      :task-check-fn="handleTaskCheck"
      @updated="loadTask"
    >
      <el-button icon="el-icon-upload2" @click="handleReturn">上一级</el-button>
      <el-button icon="el-icon-upload2" @click="handleReturnRoot">顶级</el-button>
    </task-info-card>

    <template v-if="isRoot">
      <task-tree-list :task="task" :task-init-fn="handleInitialTask" :task-check-fn="handleTaskCheck"> </task-tree-list>
    </template>

    <template v-else>
      <el-tabs type="card" v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="任务列表" name="list">
          <!-- v-loading="loading" :data="qaTaskList" @selection-change="handleSelectionChange" -->
          <task-tree-list :task="task" :task-init-fn="handleInitialTask" :task-check-fn="handleTaskCheck">
          </task-tree-list>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="history">
          <task-history-list :taskId="taskId" :list="workflowList"></task-history-list>
        </el-tab-pane>
      </el-tabs>
    </template>

    <!-- 自动质检参数定义对话框 -->
    <task-auto-check-diaolog ref="taskAutoCheckDialog"></task-auto-check-diaolog>

    <!-- 新建抽检任务对话框 -->
    <task-manu-check-dialog ref="taskCheckDialog"></task-manu-check-dialog>

    <!-- 分包设置对话框 -->
    <task-init-dialog ref="taskInitDialog" />
  </div>
</template>

<script>
import {
  listQaTask,
  listQaTaskChecker,
  listQaTaskQa,
  getQaTask,
  getTaskWithParent,
  updateQaTaskStatus,
  delQaTask,
  addQaTask,
  updateQaTask,
  summarize,
  batchSummarize,
  taskAutoCheck,
} from '@/api/mark/qaTaskV1'
import { getTaskWorkflow } from '@/api/task/workflow'

// import { treeselect, listDept } from '@/api/system/dept'
// import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { checkRole } from '@/utils/permission'
import TaskInitDialog from './dialog/TaskInitDialog.vue'
import TaskTreeList from './TaskTreeList.vue'
import TaskHistoryList from './TaskHistoryList.vue'
import TaskOperationButtons from './TaskOperationButtons.vue'
import TaskInfoCard from './TaskInfoCard.vue'
import TaskBatchDialog from './dialog/TaskBatchDialog.vue'
import TaskManuCheckDialog from './dialog/TaskManuCheckDialog.vue'
import TaskAutoCheckDiaolog from './dialog/TaskAutoCheckDiaolog.vue'

export default {
  name: 'MarkTask',
  components: {
    TaskInitDialog,
    TaskTreeList,
    TaskHistoryList,
    TaskOperationButtons,
    TaskInfoCard,
    TaskBatchDialog,
    TaskManuCheckDialog,
    TaskAutoCheckDiaolog,
  },

  computed: {
    isRoot() {
      return !this.$route.query.taskId || this.$route.query.taskId === '0'
    },
    taskId() {
      const taskId = this.$route.query.taskId
      return !taskId || taskId == '0' ? '' : taskId
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        // console.log(this.$route.query)
        if (!this.isRoot) {
          this.activeName = 'list'
          this.loadTask()
        } else {
          this.task = null
        }
      },
    },
  },
  data() {
    return {
      activeName: 'list',

      listMethod: undefined,

      task: null,

      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 验收任务表格数据
      qaTaskList: [],

      //
      workflowList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      batchOpen: false,
      subTitle: '',
      subOpen: false,
      checkFormOpen: false,
      showMarkAttributesDialog: false,
    }
  },
  created() {
    // this.initOptions()
  },

  methods: {
    loadTask() {
      getTaskWithParent(this.taskId, '@')
        .then((task) => {
          this.task = task
          return getTaskWorkflow(task.taskId)
        })
        .then((workflowPage) => {
          this.task.workflow = workflowPage.data[0]
          this.workflowList = workflowPage.data
        })
        .catch((err) => {
          console.error(err)
        })
    },

    handleTabClick(tab, event) {
      // console.log(tab, event)
    },
    /** 返回上一级按钮操作 */
    handleReturn() {
      if (!this.task) return
      this.$router.replace({
        path: '/mark/task',
        query: { taskId: this.task.parentId },
      })
    },
    handleReturnRoot() {
      if (!this.task) return
      this.$router.replace({
        path: '/mark/task',
        // query: { taskId: this.task.parentId },
      })
    },

    // 分包/初始化
    handleInitialTask(row) {
      this.$refs['taskInitDialog'].open(row)
    },

    // 抽检
    handleTaskCheck(row) {
      console.log(row)
    },
  },
}
</script>
